﻿<!DOCTYPE HTML>
<html>
<head>
	<style>
		body {
			margin: 0;
			min-width: 200px;
			font: 10pt "Helvetica Neue", Helvetica, Arial, sans-serif;
			color: #333;
		}
		a {
			text-decoration: none;
			color: #3760B5;
		}
		ul#global_notifications {
			list-style: none;
			padding: 0;
			margin: 0;
		}
		ul#global_notifications li a {
			display: block;
			color: #333;
			font-size: 14px;
			padding: 5px;
			border-top: 1px solid #D8D8D8;
			margin: 0;
			line-height: 17px;
			cursor: pointer;
		}		
		ul#global_notifications li a.new {
			background-color: #E5F3FB;
		}
		ul#global_notifications li a span {
			font-size: 10px;
			color: #666;
			display: block;
		}		
		ul#global_notifications li a:hover {
			background: #2477d7; 
			opacity:0.7;
		}
		ul#global_notifications li a:hover , ul#global_notifications li a:hover span {
			color: #fff;
		}
		#global_notifications_header {
			font-size: 14px;
			padding: 8px 5px;
			font-weight: bold;
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#767676), color-stop(100%,#111));
			color: white;
		}		
		#global_notifications_footer, .center_bold {
			text-align: center;
			font-weight: bold;
		}
		#message, #loading {
			text-align: center;
			font-weight: bold;
			margin: 20px;
		}
	</style>
	<script type="text/javascript" charset="utf-8" src="common.js"></script>
</head>
<body>
	<ul id="global_notifications"></ul>
	<div id="loading"><img src="images/loading.gif"></div>
	<div id="message" style="display: none"><a href="http://www.fitocracy.com/accounts/login/" id="aLogin" target="_blank">Login to Fitocracy</a></div>
	<script type="text/javascript" charset="utf-8">
	
		var notifList = $('global_notifications'),
			message = $('message'),
			options = loadOptions(),
			linkTarget = (options.openNotificationsIn == 2) ? '_top' : '_blank',
			nbNewNotifs = 0;
			
		function displayNotifications(list) {
		
			$('loading').style.display = 'none';
		
			// Header
			var li = document.createElement('li');
			li.id = 'global_notifications_header';
			li.innerHTML = chrome.i18n.getMessage('popNotificationsTitle');
			notifList.appendChild(li);	
			
			var links = list.querySelectorAll('a');
			if (links.length == 0) {
			
				message.style.display = 'block';
				
			} else {

				message.style.display = 'none';
			
				// Notifications
				for (var i=0; i<links.length; i++) {
					var li = document.createElement('li'),
						link = links[i],
						notificationTime = link.querySelector('span');
					if (notificationTime)
						notificationTime = humanize_time(notificationTime.textContent);
					if (link.getAttribute('id') == 'global_notifications_footer') {
						continue;
					}
					li.innerHTML = '<a href="http://www.fitocracy.com' + link.getAttribute('href') + '" class="' + link.getAttribute('class') + '"' +
						' target="' + linkTarget + '">' + link.getText() + '<span>' + (notificationTime ? notificationTime : '') + '</span></a>';
					notifList.appendChild(li);
					if (link.getAttribute('class') == 'new')
						nbNewNotifs++;
				}
				
				// Footer
				var li = document.createElement('li');
				li.id = 'global_notifications_footer';
				li.innerHTML = '<a href="http://www.fitocracy.com/notifications/" target="' + linkTarget + '">' + chrome.i18n.getMessage('popSeeAllNotifications') + '</a>';
				notifList.appendChild(li);
				li = document.createElement('li');
				li.className = 'center_bold';
				li.innerHTML = '<a href="options.html" target="_blank">' + chrome.i18n.getMessage('popOptions') + '</a>';
				notifList.appendChild(li);				
				
			}
			chrome.browserAction.setBadgeText({'text': (nbNewNotifs > 0 ? nbNewNotifs.toString() : '')});
		}
		
		$('aLogin').textContent = chrome.i18n.getMessage('popLoginToFitocracy');
		
		if (options.openNotificationsIn == 2) {
			document.addEventListener('click', function(event) {
				if (event.target) {
					var link = event.target;
					while (link.tagName != 'A' && link.tagName != 'BODY') {
						link = link.parentNode;
					}
					if (link && link.href && link.target && link.target == '_top') {
						chrome.tabs.update(null, {url: link.href});
						window.close();
					}
				}
			});
		}
		
		getNotifications(displayNotifications);
	</script>
</body>
</html>